<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../js/lib/theme-chalk/index.css" />

		<link rel="stylesheet" type="text/css" href="../../css/my_commont.css" />
		<link rel="stylesheet" type="text/css" href="index.css" />

		<script src="../../common/utilCookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/author.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入组件库 -->
		<script src="../../js/lib/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/axios.min.js"></script>
		<script src="../../common/judegetEmpty.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/aixos-init.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/math.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="shopGoodSpecApp" v-cloak>
			<div class="contaner" v-loading.fullscreen.lock="fullscreenLoading">
				<div class="section-header">
					商品 - - 商品规格
				</div>
				<hr class="hr-style" />
				<div class="addGoodBtn ">
					<el-button type="primary" icon="el-icon-plus" @click="addGoodCategory">添加新的商品规格</el-button>
				</div>

				<div class="shop-good-type-tab">
					<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
						<el-tab-pane label="商品规格" name="first">
							<div class="good-table">
								<el-table :data="goodLoacalStock" border style="width: 100%">
									<el-table-column prop="combination" label="规格名称">
									</el-table-column>
									<el-table-column prop="price" width="300" label="价格">
									</el-table-column>
									<el-table-column prop="inventory" label="库存">
									</el-table-column>
									<el-table-column label="操作" width="200">
										<template slot-scope="scope">

											<el-button type="text" size="small" @click="eidtGoodProp(scope.row)">编辑</el-button>
											<el-button type="text" size="small" @click="deleteGoodProp(scope.row)">删除</el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>

						</el-tab-pane>

					</el-tabs>
				</div>
				<el-dialog :title="title" :visible.sync="dialogFormVisible">
					<el-form ref="goodPropFrom" :model="goodPropFrom" label-width="180px">

						<el-form-item label="商品规格价格(单位:¥):">
							<el-input v-model="goodPropFrom.price"></el-input>
						</el-form-item>

						<el-form-item label="当前商品规格参数:" v-if="isAdd == false">
							<p>{{selectGoodProp}}</p>
						</el-form-item>
						<el-form-item label="修改商品规格参数:" v-if="isAdd == false">
							<div v-for="(item,key)  in goodPropList" :key="key">
								<p>{{item.name}}</p>
								<el-radio-group v-model="item.select">
									<el-radio v-for="data in item.options" :label=data.name>{{data.name}}</el-radio>
								</el-radio-group>
							</div>
						</el-form-item>
						<el-form-item label="商品规格参数:" v-else>
							<div v-for="(item,key)  in goodPropList" :key="key">
								<p>{{item.name}}</p>
								<el-radio-group v-model="item.select">
									<el-radio v-for="data in item.options" :label=data.name>{{data.name}}</el-radio>
								</el-radio-group>
							</div>
						</el-form-item>
						<div class="tip-item tip-item-height">
							<span>规格可多选，如没有规格请到规格库添加此分类下的规格</span>
						</div>

						<el-form-item label="商品规格库存数量:">
							<el-input v-model.number="goodPropFrom.inventory"></el-input>
						</el-form-item>
						<div class="tip-item tip-item-height">
							<span>商铺库存数量必须为0~999999999之间的整数</span>
						</div>
						<el-form-item label="商品规格封面图：">
							<el-upload ref="categoryCoverUpload" :action='uploadUrl' :on-remove="handleRemove" :file-list="fileList"
							 list-type="picture" :limit='1' :on-exceed="handleCategoryCoverExceed" :on-success="handleCategoryCoverSuccess">
								<el-button slot="trigger" size="small" type="primary"><i class="el-icon-upload el-icon--right"></i>&nbsp;选取图片</el-button>

							</el-upload>
						</el-form-item>
						<div class="tip-item tip-item-height">
							<span>商品规格图片，最多1张</span>
						</div>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="configClick">确定</el-button>
					</div>
				</el-dialog>


			</div>
		</div>
	</body>
</html>
